<template>
	<div>
		<el-form>
			<el-form-item>
				<el-button type="primary" @click="onAddRole" color="#000" v-auth="'role:add'"
					>新增角色</el-button
				>
			</el-form-item>
		</el-form>
		<el-table :data="roleList" border style="width: 100%">
			<el-table-column
				prop="roleId"
				label="角色id"
				width="180px"
			></el-table-column>
			<el-table-column
				prop="roleName"
				label="角色名称"
				width="180px"
			></el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button
						type="primary"
						size="default"
						@click="onChangeAuth(scope.row)"
						color="#000"
						v-auth="'role:authChange'"
						>修改权限</el-button
					>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script lang="ts" setup>

import { ElMessageBox, ElMessage } from "element-plus";
import { getRoleList } from "@/api/role";
import { IRole } from "@/types/common.js";

const router = useRouter();

let roleList = ref<IRole[]>([]);

onMounted(async () => {
	const res = await getRoleList();
	roleList.value = res;
});

const onAddRole = () => {
	ElMessageBox.prompt("请输入角色名称", "添加角色", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
	})
		.then(({ value, action }) => {
			if (value) {
				roleList.value.push({
					roleId: roleList.value.length + 1,
					roleName: value,
					authority: [],
				});
				console.log("action:" + action);
				ElMessage({
					type: "success",
					message: `${value}添加成功`,
				});
			}
		})
		.catch(err => {
			ElMessage({
				type: "info",
				message: `点击了取消按钮 + ${err}`,
			});
		});
};

const onChangeAuth = (row: IRole) => {
	router.push({
		path: "auth",
		query: {
			id: row.roleId,
			// auth: row.authority,
		},
	});
};
</script>
